@import "~scss/variables";

$sw-field-transition: border-color 0.3s ease-out, background 0.3s ease;

.sw-block-field {
    .sw-block-field__block {
        border: 1px solid $color-gray-300;
        border-radius: $border-radius-default;
        overflow: hidden;
        height: 48px;
    }

    .sw-field--select__options .mt-icon {
        margin-bottom: 5px;
    }

    input,
    select,
    textarea {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 12px 16px;
        border: none;
        background: $color-white;
        font-size: $font-size-xs;
        line-height: 22px;
        transition: $sw-field-transition;
        color: $color-darkgray-200;
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;

        &:invalid,
        &:-moz-submit-invalid,
        &:-moz-ui-invalid {
            box-shadow: none;
        }

        &:disabled {
            background: $color-gray-100;
            border-color: $color-gray-300;
            cursor: default !important;
        }

        &::placeholder {
            color: var(--color-text-secondary-default);
        }
    }

    &.has--focus {
        .sw-block-field__block {
            border-color: $color-shopware-brand-500;
            box-shadow: 0 0 4px lighten($color-shopware-brand-500, 30%);
        }
    }

    &.has--error {
        .sw-block-field__block {
            background: $color-crimson-50;
            border-color: $color-crimson-500;

            input,
            textarea,
            select {
                background: $color-crimson-50;
            }
        }

        .sw-field__addition {
            border-left: 1px solid $color-crimson-500;

            &.is--prefix {
                border-left: unset;
                border-right: 1px solid $color-crimson-500;
            }
        }
    }

    &.has--error.has--focus {
        .sw-block-field__block {
            box-shadow: 0 0 4px lighten($color-crimson-500, 30%);
        }
    }

    &.sw-field--small {
        margin-bottom: 0;

        input,
        textarea,
        select {
            padding: 4px 16px;
        }
    }

    &.sw-field--medium {
        margin-bottom: 6px;

        input,
        textarea,
        select {
            padding: 8px 16px;
        }
    }
}
